<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>个人中心</title>
    <th:block th:include="common/header :: header"/>
</head>
<body>
<div th:replace="common/navbar :: navbar"></div>
<div class="container-fluid p-5">
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">个人中心</h5>
            <p class="card-text">管理您的地址</p>
            <div class="table-responsive">
                <button class="btn btn-sm btn-outline-primary mb-2" th:onclick="openAddPanel()">新增地址</button>
                <table class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <td>编号</td>
                        <td>姓名</td>
                        <td>电话</td>
                        <td>地址</td>
                        <td>操作</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="address : ${addresses}">
                        <td>[[${address.id}]]</td>
                        <td>[[${address.name}]]</td>
                        <td>[[${address.mobile}]]</td>
                        <td>[[${address.address}]]</td>
                        <td>
                            <button class="btn btn-sm btn-primary mr-1" th:onclick="openEditPanel([[${address}]])">编辑</button>
                            <a class="btn btn-sm btn-danger ml-1" th:href="@{/user/delAddress(addressId=${address.id})}">删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div id="addr-modal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form id="addr-form" class="form-group" th:action="@{/user/address}" method="post">
                    <div class="form-group invisible">
                        <label for="id">编号</label>
                        <input id="id" name="id" class="form-control" type="text" readonly>
                    </div>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input id="name" name="name" class="form-control" type="text" required>
                    </div>
                    <div class="form-group">
                        <label for="mobile">电话</label>
                        <input id="mobile" name="mobile" class="form-control" type="text" required>
                    </div>
                    <div class="form-group">
                        <label for="address">地址</label>
                        <input id="address" name="address" class="form-control" type="text" required>
                    </div>
                    <div class="text-right">
                        <button class="btn btn-primary" type="submit">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<th:block th:include="common/scripts :: scripts"/>
<script type="text/javascript" th:inline="javascript">
    openAddPanel = () => {
        // 重置表单
        $("#addr-form")[0].reset()
        $("#addr-modal").modal()
    }

    openEditPanel = (address) => {
        $("#id").val(address.id)
        $("#name").val(address.name)
        $("#mobile").val(address.mobile)
        $("#address").val(address.address)
        $("#addr-modal").modal()
    }
</script>

</body>
</html>